<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>聊天记录</title>

  <script src="../static/kaige/js/szload.js"></script>
  <link rel="stylesheet" href="../static/layim-assets/layim.css" />
  <style>
    body .layim-chat-main {
      height: auto;
    }

    body .layim-chat-main .layui-flow-more .layim-chatmin-tips {
      margin: 0;
      padding: 10px 0;
      border: none;
      text-align: center;
      font-size: 12px;
      color: #333;
    }
  </style>
</head>

<body>

  <div class="layim-chat-main">
    <ul id="LAY_view"></ul>
  </div>

  <script>
    load_init_js(function () {
      layui.config({
        base: szoapcpath + '/static/kaige/layuiextend/'
        , layimPath: szoapcpath + '/static/kaige/layuiextend/layim/' //配置 layim.js 所在目录
        , layimAssetsPath: szoapcpath + '/static/layim-assets/' //layim 资源文件所在目录
      }).extend({
        layim: layui.cache.layimPath + 'layim' //配置 layim 组件所在的路径
      }).use(['jquery', 'chatflow'], function () {
        var layim = parent.layui.layim
          , laytpl = parent.layui.laytpl
          , $ = layui.jquery
          , chatflow = layui.chatflow
          , laypage = parent.layui.laypage;

        $rece_id = getQueryString('id');
        $ctype = getQueryString('type');
        if ($ctype === 'friend') {
          $chat_type = 1;
        } else if ($ctype === 'group') {
          $chat_type = 2;
        }
        var renderLog = function (page, callback) {
          $.ajax({
            url: '/im.chat/getUserChatObjList'
            , data: { rid: $rece_id, page: page || 1, limit: 10 }
            , success: function (res) {
              if (res.code === 0) {
                callback && callback(res.data, res.pages);
              } else {
                layer.msg(res.msg);
              }
            }
          });
        };

        //信息流
        chatflow.load({
          elem: '#LAY_view' //流加载容器
          , isAuto: false
          , end: '<li class="layim-chatmin-tips">暂无更多新消息</li>'
          , done: function (page, next) { //加载下一页
            renderLog(page, function (data, pages) {
              var html = laytpl($('#chatlogTpl').html()).render({
                data: data
                , page: page
              });
              next(html, page < pages);
            });
          }
        });
      });
    });
  </script>
  <script type="text/html" id="chatlogTpl">
  {{# if(d.data){ for(var i=d.data.length-1;i>=0;i--){ var item = d.data[i];
    if(item.send_id == layui.layim.cache().mine.id){ }}
      <li id="log{{ item.id }}" class="layim-chat-mine">
        <div class="layim-chat-user">
          <img src="{{ item.send_id_avatar }}">
          <cite><i>{{ layui.data.date(item.create_time*1000) }}</i>{{ item.send_id_name }}</cite>
        </div>
        <div class="layim-chat-text">{{- layui.layim.content(item.content) }}</div>
      </li>
    {{# } else { }}
      <li id="log{{ item.id }}"><div class="layim-chat-user">
        <img src="{{ item.send_id_avatar }}">
        <cite>{{ item.send_id_name }}<i>{{ layui.data.date(item.create_time*1000) }}</i></cite>
      </div>
      <div class="layim-chat-text">{{- layui.layim.content(item.content) }}</div>
    </li>
    {{# }
  }; } }}
</script>
</body>

</html>